<template>
  <el-card class="avue_height">
    <el-page-header
      @back="$router.go(-1)"
      style="margin-bottom: 10px"
    ></el-page-header>
    <div style="margin: 10px 0px 20px 0px">
      <template v-for="(item, index) in btn">
        <el-button
          type="primary"
          :key="index"
          @click="handler(index)"
          v-if="item.isShow"
          >{{ item.title }}</el-button
        >
      </template>
    </div>
    <avue-crud
      ref="crud"
      style="width: 100%"
      :data="loadData"
      :option="tableOption"
      :table-loading="loading"
    >
      <template slot-scope="scope" slot="indexLabel">
        <span>{{ scope.row.$index + (page.current - 1) * page.size + 1 }}</span>
      </template>
      <template slot="bannerPic" slot-scope="scope">
        <el-image
          style="width: 50px; height: 50px"
          :src="scope.row.bannerPic"
          :preview-src-list="[scope.row.bannerPic]"
        ></el-image>
      </template>
      <template slot-scope="scope" slot="begainTime">
        <span>{{ scope.row.begainTime + " - " + scope.row.endTime }}</span>
      </template>
      <template slot="menu" slot-scope="scope">
        <el-button
          @click="edit(scope.row)"
          type="text"
          icon="el-icon-edit"
          :disabled="scope.row.disabled"
          >编辑</el-button
        >
        <el-button
          @click="del(scope.row)"
          type="text"
          icon="el-icon-delete"
          :disabled="scope.row.disabled"
          >删除</el-button
        >
      </template>
    </avue-crud>
    <template>
      <div style="width: 100%; position: relative; height: 50px">
        <el-pagination
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :pager-count="7"
          :current-page="page.current"
          :page-size="page.size"
          :total="page.total"
          layout="total, sizes, prev, pager, next, jumper"
          style="margin: 2% 0; position: absolute; right: 1%"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </template>
  </el-card>
</template>

<script src='./index.js'></script>

<style>
</style>